docs
#WIP
@tailwindみたいなやつ
@tailwind
.cssに記述するので、下に書くほど優先順位が高い
.css
基本的に、.cssを書いて拡張したい時に知らないといけない話になる
tailwind CSSのcorePluginsの実装箇所
https://github.com/tailwindlabs/tailwindcss/blob/2d40d0b30a818dd49a6fe3672ead0b54fe531c53/src/corePlugins.js
@tailwind系の定義もこの中に書かれている
addBaseとかaddComponentnsのようなキーワードで検索すれば、そのルールを定義してるのがわかる
addBase
addComponentns
リセットCSS
https://creive.me/archives/10438/
https://coliss.com/articles/build-websites/operation/css/css-reset-for-modern-browser.html
https://webdesign-trends.net/entry/8137
reset cssもCascade Layersを使って制御すれば良い
tailwind CSSが用意している4グループのstyleを読み込むTailwind CSSのdirectives
基本的に4つ全てを読み込むんだから、分ける必要なくない?という気もしたが、
これらは後にaddBase()などの関数を使って拡張することができる
from Tailwind CSSのdirectives
tailwindの@layer
https://tailwindcss.com/docs/functions-and-directives#layer
Cascade Layersと同じイメージかな
@tailwind base、@tailwind components、@tailwind utilitiesに対してのみ使える
tailwindの@apply
https://tailwindcss.com/docs/functions-and-directives#apply
.cssの中で、tailwind記法で指定するためのやつ
.cssなので{..}の中には普通のcssしか書けないが、ここにtailwind記法を{ @apply ... }と書くことができる
{..}
{ @apply ... }
from Tailwind CSS
globalでよく使うサイズとかのthemeの変数を用意して、project内で使う選択肢を制限できる
customする方法のパターンが多すぎて難しい
customするにもある程度ルールを設けといたほうが良さそう
コンフリクト起こす
tailwindcss/defaultConfig.stub.js at master · tailwindlabs/tailwindcss · GitHub
CSSでの要素の高さもほぼ同じ話
この3種類
自分自身で絶対値で指定する
block-level elementに対し、px, vwなどの絶対値で指定したとき
親のサイズによって決まる
initial
そのプロパティの初期値を使用する
https://developer.mozilla.org/ja/docs/Web/CSS/initial
inherit
親要素の、同じプロパティの値を使用する
from Cascadeの優先順位
Importanceは!importantのこと
Importance
Originというのは、そのCSSがどこで宣言されたのか、のこと
Origin
どのOriginなのかで優先順位が変わる ref spec
e.g. user agent style sheet
<ul>
どのbrowserも付いているのかは知らん
Chromeでは以下のようなstyleがdefaultであたっている
ul {
display: block;
Scalable and Modular Architecture for CSS
2013年とか2014年に話題になった(?)CSS設計
Ja - Scalable and Modular Architecture for CSS
Webで読める本
参考
from @tailwind
.flex、.opacity-0など
.flex
.opacity-0
tailwindといえばこれこれ、みたいなやつか
最終的に生成されるファイルはめちゃくちゃでかいらしい
(もちろんbuild時に削られるので問題はない)
from Tailwind CSSのplugins
Tailwindでフクロウセレクタを定義する
tailwind.config.jsの中で直接書いても良い